<template>
  <div class="jsDom">
    <div v-for="item in list" :key="item.key">
      {{ item.name }}
    </div>
    <component :is="componentDiv"></component>
    <div style="position:fixed;bottom:0">
      <a-button type="" @click="change">
        切换组件
      </a-button>
    </div>
  </div>
</template>

<script>
import listData from "./listData.js";
import numFlop from "../numFlop/index.vue";
import liquidfill from "../liquidfill/index.vue";
export default {
  name: "jsDom",
  data() {
    return {
      list: listData,
      componentDiv: "numFlop"
    };
  },
  components: {
    numFlop,
    liquidfill
  },
  methods: {
    change() {
      this.componentDiv =
        this.componentDiv === "numFlop" ? "liquidfill" : "numFlop";
    }
  }
};
</script>

<style lang="scss" scoped></style>
